<template>
  <el-card class="user-security-info" shadow="never">
    <template #header>
      <div class="card-header">
        <span>安全信息</span>
        <el-tag :type="getSecurityLevel().type" size="small">
          {{ getSecurityLevel().text }}
        </el-tag>
      </div>
    </template>

    <div class="security-info">
      <!-- 登录信息 -->
      <div class="security-section">
        <h4>登录信息</h4>
        <div class="info-list">
          <div class="info-item">
            <div class="info-icon login-time">
              <IconifyIconOffline icon="ep:clock" />
            </div>
            <div class="info-content">
              <div class="info-label">最后登录时间</div>
              <div class="info-value">
                {{ formatDateTime(securityInfo?.lastLoginTime) }}
              </div>
            </div>
          </div>

          <div class="info-item">
            <div class="info-icon login-ip">
              <IconifyIconOffline icon="ep:location" />
            </div>
            <div class="info-content">
              <div class="info-label">最后登录IP</div>
              <div class="info-value">
                {{ formatIpAddress(securityInfo?.lastLoginIp) }}
              </div>
            </div>
          </div>

          <div class="info-item">
            <div class="info-icon login-location">
              <IconifyIconOffline icon="ep:map-location" />
            </div>
            <div class="info-content">
              <div class="info-label">登录地点</div>
              <div class="info-value">
                {{ securityInfo?.lastLoginLocation || "未知" }}
              </div>
            </div>
          </div>

          <div class="info-item">
            <div class="info-icon login-device">
              <IconifyIconOffline icon="ep:monitor" />
            </div>
            <div class="info-content">
              <div class="info-label">登录设备</div>
              <div class="info-value">
                {{ securityInfo?.lastLoginDevice || "未知" }}
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 安全状态 -->
      <div class="security-section">
        <h4>安全状态</h4>
        <div class="security-status">
          <div class="status-item">
            <div
              class="status-icon"
              :class="{ verified: securityInfo?.isEmailVerified }"
            >
              <IconifyIconOffline icon="ep:message" />
            </div>
            <div class="status-content">
              <div class="status-label">邮箱验证</div>
              <div class="status-value">
                <el-tag
                  :type="securityInfo?.isEmailVerified ? 'success' : 'danger'"
                  size="small"
                >
                  {{ securityInfo?.isEmailVerified ? "已验证" : "未验证" }}
                </el-tag>
              </div>
            </div>
          </div>

          <div class="status-item">
            <div
              class="status-icon"
              :class="{ verified: securityInfo?.isPhoneVerified }"
            >
              <IconifyIconOffline icon="ep:phone" />
            </div>
            <div class="status-content">
              <div class="status-label">手机验证</div>
              <div class="status-value">
                <el-tag
                  :type="securityInfo?.isPhoneVerified ? 'success' : 'danger'"
                  size="small"
                >
                  {{ securityInfo?.isPhoneVerified ? "已验证" : "未验证" }}
                </el-tag>
              </div>
            </div>
          </div>

          <div class="status-item">
            <div class="status-icon">
              <IconifyIconOffline icon="ep:lock" />
            </div>
            <div class="status-content">
              <div class="status-label">密码更新</div>
              <div class="status-value">
                {{ formatDateTime(securityInfo?.passwordLastChanged) }}
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 风险提示 -->
      <div
        v-if="
          securityInfo?.suspiciousLoginCount &&
          securityInfo.suspiciousLoginCount > 0
        "
        class="security-section"
      >
        <h4>风险提示</h4>
        <div class="risk-alert">
          <el-alert
            :title="`检测到 ${securityInfo.suspiciousLoginCount} 次可疑登录`"
            type="warning"
            :closable="false"
            show-icon
          >
            <template #default>
              <p>该用户存在可疑登录行为，建议加强安全监控。</p>
            </template>
          </el-alert>
        </div>
      </div>

      <!-- 最近登录IP -->
      <div v-if="securityInfo?.recentLoginIps?.length" class="security-section">
        <h4>最近登录IP</h4>
        <div class="recent-ips">
          <div class="ip-list">
            <div
              v-for="(ip, index) in securityInfo.recentLoginIps"
              :key="index"
              class="ip-item"
            >
              <div class="ip-icon">
                <IconifyIconOffline icon="ep:location" />
              </div>
              <div class="ip-address">{{ formatIpAddress(ip) }}</div>
              <div class="ip-status">
                <el-tag
                  :type="ip === securityInfo?.lastLoginIp ? 'primary' : 'info'"
                  size="small"
                  effect="light"
                >
                  {{ ip === securityInfo?.lastLoginIp ? "当前" : "历史" }}
                </el-tag>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 安全建议 -->
      <div class="security-section">
        <h4>安全建议</h4>
        <div class="security-suggestions">
          <div v-if="!securityInfo?.isEmailVerified" class="suggestion-item">
            <IconifyIconOffline icon="ep:warning" />
            <span>建议用户验证邮箱以提高账户安全性</span>
          </div>
          <div v-if="!securityInfo?.isPhoneVerified" class="suggestion-item">
            <IconifyIconOffline icon="ep:warning" />
            <span>建议用户绑定手机号以提高账户安全性</span>
          </div>
          <div v-if="isPasswordOld()" class="suggestion-item">
            <IconifyIconOffline icon="ep:warning" />
            <span>密码超过90天未更新，建议提醒用户更新密码</span>
          </div>
          <div
            v-if="
              securityInfo?.suspiciousLoginCount &&
              securityInfo.suspiciousLoginCount > 0
            "
            class="suggestion-item"
          >
            <IconifyIconOffline icon="ep:warning" />
            <span>存在可疑登录记录，建议加强监控</span>
          </div>
          <div v-if="getSecurityScore() === 100" class="suggestion-item">
            <IconifyIconOffline icon="ep:check" />
            <span>账户安全状态良好</span>
          </div>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { IconifyIconOffline } from "@/components/ReIcon";
import {
  formatIpAddress,
  type UserSecurityInfo
} from "@/api/admin-user-profile";

interface Props {
  securityInfo?: UserSecurityInfo | null;
}

const props = defineProps<Props>();

const formatDateTime = (timeStr?: string) => {
  if (!timeStr) return "未知";
  return new Date(timeStr).toLocaleString("zh-CN");
};

const getSecurityLevel = () => {
  const score = getSecurityScore();
  if (score >= 80) {
    return { type: "success", text: "安全" };
  } else if (score >= 60) {
    return { type: "warning", text: "一般" };
  } else {
    return { type: "danger", text: "风险" };
  }
};

const getSecurityScore = (): number => {
  let score = 0;

  if (props.securityInfo?.isEmailVerified) score += 30;
  if (props.securityInfo?.isPhoneVerified) score += 30;
  if (!isPasswordOld()) score += 20;
  if (
    !props.securityInfo?.suspiciousLoginCount ||
    props.securityInfo.suspiciousLoginCount === 0
  )
    score += 20;

  return score;
};

const isPasswordOld = (): boolean => {
  if (!props.securityInfo?.passwordLastChanged) return true;

  const lastChanged = new Date(props.securityInfo.passwordLastChanged);
  const now = new Date();
  const diffDays = Math.floor(
    (now.getTime() - lastChanged.getTime()) / (1000 * 60 * 60 * 24)
  );

  return diffDays > 90;
};
</script>

<style lang="scss" scoped>
// 响应式设计
@media (width <= 768px) {
  .user-security-info {
    .security-info {
      .security-section {
        .security-status {
          .status-item {
            .status-content {
              flex-direction: column;
              gap: 4px;
              align-items: flex-start;
            }
          }
        }
      }
    }
  }
}

.user-security-info {
  .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
  }

  .security-info {
    display: flex;
    flex-direction: column;
    gap: 24px;

    .security-section {
      h4 {
        padding-bottom: 8px;
        margin: 0 0 12px;
        font-size: 14px;
        font-weight: 600;
        color: #374151;
        border-bottom: 1px solid #e5e7eb;
      }

      .info-list {
        display: flex;
        flex-direction: column;
        gap: 12px;

        .info-item {
          display: flex;
          gap: 12px;
          align-items: center;
          padding: 8px;
          background: #f9fafb;
          border-radius: 6px;

          .info-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            font-size: 14px;
            color: #fff;
            border-radius: 6px;

            &.login-time {
              background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            }

            &.login-ip {
              background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            }

            &.login-location {
              background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
            }

            &.login-device {
              background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
            }
          }

          .info-content {
            flex: 1;

            .info-label {
              margin-bottom: 2px;
              font-size: 12px;
              color: #6b7280;
            }

            .info-value {
              font-size: 13px;
              font-weight: 500;
              color: #1f2937;
            }
          }
        }
      }

      .security-status {
        display: flex;
        flex-direction: column;
        gap: 12px;

        .status-item {
          display: flex;
          gap: 12px;
          align-items: center;
          padding: 8px;
          background: #f9fafb;
          border-radius: 6px;

          .status-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            font-size: 14px;
            color: #6b7280;
            background: #e5e7eb;
            border-radius: 6px;

            &.verified {
              color: #fff;
              background: linear-gradient(135deg, #67c23a 0%, #85ce61 100%);
            }
          }

          .status-content {
            display: flex;
            flex: 1;
            align-items: center;
            justify-content: space-between;

            .status-label {
              font-size: 13px;
              font-weight: 500;
              color: #374151;
            }
          }
        }
      }

      .risk-alert {
        :deep(.el-alert) {
          border-radius: 8px;
        }
      }

      .recent-ips {
        .ip-list {
          display: flex;
          flex-direction: column;
          gap: 8px;

          .ip-item {
            display: flex;
            gap: 8px;
            align-items: center;
            padding: 6px 8px;
            font-size: 12px;
            background: #f9fafb;
            border-radius: 6px;

            .ip-icon {
              color: #6b7280;
            }

            .ip-address {
              flex: 1;
              font-family: monospace;
              color: #374151;
            }
          }
        }
      }

      .security-suggestions {
        display: flex;
        flex-direction: column;
        gap: 8px;

        .suggestion-item {
          display: flex;
          gap: 8px;
          align-items: center;
          padding: 6px 8px;
          font-size: 12px;
          color: #374151;
          background: #f9fafb;
          border-radius: 6px;

          .iconify {
            flex-shrink: 0;
            color: #e6a23c;
          }
        }
      }
    }
  }
}
</style>
